<template>
    <div>
        <div class="header">
            <p>购物车</p>
            <button @click='deleteAll'>删除</button>
        </div>
        <div v-for='item in cartList' :key='item.id'>
            <van-swipe-cell>
                <!-- 复选框  -->
                <van-checkbox-group v-model="result" ref="checkboxGroup">
                    <van-checkbox class='eachBox' :name='item.product_id' @click='changeFnEach(item)' />
                </van-checkbox-group>
                <!-- 商品卡片 -->
                <van-card :num="item.number" desc="描述信息" class="goods-card" :price="item.retail_price"
                    :title="item.goods_name" :thumb="item.list_pic_url">
                    <!-- 步进器 -->
                    <template #footer>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input
                            @change="changeNub(item)" />
                    </template>
                </van-card>
                <!-- 删除单条插槽 -->
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                        @click='deleteEach(item.product_id)' />
                </template>
            </van-swipe-cell>
        </div>

        <van-submit-bar :price="result.length == 0 ? 0 : priceAll * 100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkAll" class="CHECK" @click='changeFnAll'>全选</van-checkbox>
            <template #tip>你的收货地址不支持同城送,
                <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
import { cartIndex, deleteGoods, changeGoods, addANDsub } from '@/api/cartApi.js'
export default {
    data() {
        return {
            cartList: [],//商品总数据
            result: [],//选中的商品组成的数组，里面存有当前选中商品的product_id值(通过name传值的)
            priceAll: '',//总价，后端返回的

            value: '',//步进器的数量
            // valueADDnum:'',//加入的数量+步进器

            productIdArr: '',//所有选中的product_id
        }
    },
    mounted() {
        this.render()
    },
    computed: {
        checkAll: {
            get() {//反选
                return this.result.length == this.cartList.length && this.result.length!=0//返回true/false
            },
            set(val) {
                if (val == true) {//全选
                    this.result = this.cartList.map((item) => item.product_id);//将总数据中每一项的product_id传给result，
                }
                else {//取消全选
                    this.result = [];
                }
            }
        }
    },
    methods: {
        // 初始获取所有数据
        render() {
            cartIndex().then(res => {
                console.log("购物车所有商品信息",res);
                this.cartList = res.data.data.cartList//所有的商品信息
                this.priceAll = res.data.data.cartTotal.checkedGoodsAmount//后端返回的选中商品的总价
                this.cartList.forEach(item => {
                    if (item.checked == 1) {  //如果商品是被选中的状态，就推入选中商品数组
                        this.result.push(item.product_id)
                        
                    }
                })
            })
        },
        // 点击单选，切换商品的选中状态
        changeFnEach(item) {
            console.log("item", item);
            changeGoods({ isChecked: item.checked ? '0' : '1', productIds: item.product_id }).then(res => {
                console.log("选中状态",res);
                if (res.data.errno == 0) {
                    this.cartList = res.data.data.cartList//重新渲染
                    this.priceAll = res.data.data.cartTotal.checkedGoodsAmount
                }
            })
        },
        // 点击全选，切换商品的选中状态
        changeFnAll() {
            //所有被选中商品的product_id，定义是为了好传参
            this.productIdArr = ''
            this.result.forEach(item => {
                this.productIdArr += item + ','
            })
            console.log("00000", this.productIdArr);
            changeGoods({ isChecked: this.checkAll ? '1' : '0', productIds: this.productIdArr }).then(res => {
                if (res.data.errno == 0) {
                    this.cartList = res.data.data.cartList//重新渲染
                    this.priceAll = res.data.data.cartTotal.checkedGoodsAmount
                }
            })
        },

        // 删除所有选中的商品
        deleteAll() {
            // 将商品的product_id转为逗号分割的字符串
            var str = this.result.join(',')
            deleteGoods({ productIds: str }).then(res => {
                //重新渲染
                this.render()
            })
        },

        // 删除单个商品
        deleteEach(product_id) {
            deleteGoods({ productIds: product_id.toString() }).then(res => {
                //重新渲染
                this.render()
            })
        },

        onSubmit() {
            this.$toast.success('跳转支付');
        },
        onClickEditAddress() {
            this.$toast.success('跳转地址');
        },

        // 步进器中商品个数改变时掉接口
        changeNub(item) {
            addANDsub({
                goodsId: item.goods_id, id: item.id, number: item.number, productId: item.product_id
            }).then(res => {
                this.cartList = res.data.data.cartList//所有的商品信息
                this.priceAll = res.data.data.cartTotal.checkedGoodsAmount//后端返回的选中商品的总价
            })
        }
    }
}
</script>

<style scoped lang='less'>
// header {
//     width: 100%;
//     height: 150px;
//     display: flex;
//     justify-content: space-around;
//     align-items: center;
//     overflow: hidden;
//     margin-top: 80px;
// }

.header {
    width: 100%;
    height: 70px;
    // position: fixed;
    // z-index: 999;
    // top: 0;
    // left: 0px;
    display: flex;
    align-items: center;
    background: rgb(206, 41, 41);

    p {
        width: 100%;
        height: 70px;
        line-height: 70px;
        font-size: 20px;
        color: white;
        text-align: center;
        // margin-top: 20px;
    }

    // ;

    button {
        width: 50px;
        background: none;
        color: white;
        font-size: 15px;
        float: right;
    }
}

.van-submit-bar {
    position: fixed;
    bottom: 50px;
    left: 0;
}
.van-swipe-cell {

    // width: 100%;
    // position: relative;
    // display: flex;
    // justify-content: space-between;
    .eachBox {
        position: absolute;
        z-index: 99;
        margin: 40px 0px 50px 8px;
    }


    .van-stepper {
        position: absolute;
        z-index: 10;
        top: 20px;
        right: 10px;
    }

}


.delete-button {
    height: 100%;
}
</style>